<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>历史记录</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <link rel="stylesheet" href="css/common.css">
</head>
<body>
    <!-- 状态栏 -->
    <div class="status-bar"></div>

    <!-- 导航栏 -->
    <div class="weapp-nav">
        <span>历史记录</span>
    </div>

    <!-- 主要内容区 -->
    <div class="weapp-container">
        <!-- 日历选择器 -->
        <div class="weapp-card">
            <div class="flex items-center justify-between mb-4">
                <button class="text-gray-600">
                    <i class="fas fa-chevron-left"></i>
                </button>
                <h2 class="text-lg font-semibold">2024年3月</h2>
                <button class="text-gray-600">
                    <i class="fas fa-chevron-right"></i>
                </button>
            </div>
            <div class="grid grid-cols-7 gap-2 text-center mb-2">
                <div class="text-sm text-gray-500">日</div>
                <div class="text-sm text-gray-500">一</div>
                <div class="text-sm text-gray-500">二</div>
                <div class="text-sm text-gray-500">三</div>
                <div class="text-sm text-gray-500">四</div>
                <div class="text-sm text-gray-500">五</div>
                <div class="text-sm text-gray-500">六</div>
            </div>
            <div class="grid grid-cols-7 gap-2 text-center">
                <div class="p-2 text-gray-400">25</div>
                <div class="p-2 text-gray-400">26</div>
                <div class="p-2 text-gray-400">27</div>
                <div class="p-2 text-gray-400">28</div>
                <div class="p-2 text-gray-400">29</div>
                <div class="p-2">1</div>
                <div class="p-2">2</div>
                <div class="p-2">3</div>
                <div class="p-2">4</div>
                <div class="p-2">5</div>
                <div class="p-2 relative">
                    6
                    <span class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-2 h-2 bg-yellow-500 rounded-full"></span>
                </div>
                <div class="p-2 relative">
                    7
                    <span class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-2 h-2 bg-green-500 rounded-full"></span>
                </div>
                <div class="p-2">8</div>
                <div class="p-2">9</div>
                <div class="p-2 bg-primary text-white rounded-full">10</div>
                <div class="p-2">11</div>
                <div class="p-2">12</div>
                <div class="p-2">13</div>
                <div class="p-2">14</div>
                <div class="p-2">15</div>
                <div class="p-2">16</div>
            </div>
        </div>

        <!-- 当日记录列表 -->
        <div class="weapp-card">
            <h2 class="text-lg font-semibold mb-4">2024年3月10日</h2>
            <div class="weapp-list">
                <div class="weapp-list-item">
                    <div class="flex-1">
                        <div class="flex items-center">
                            <i class="fas fa-poo text-yellow-500 mr-2"></i>
                            <span class="font-medium">正常便便</span>
                        </div>
                        <div class="text-sm text-gray-500 mt-1">
                            10:30
                            <span class="ml-2 text-green-500">
                                <i class="fas fa-check-circle mr-1"></i>状态良好
                            </span>
                        </div>
                        <div class="text-sm text-gray-500 mt-1">
                            <i class="fas fa-tint text-blue-500 mr-1"></i>饮水量：500ml
                        </div>
                    </div>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
                <div class="weapp-list-item">
                    <div class="flex-1">
                        <div class="flex items-center">
                            <i class="fas fa-poo text-green-500 mr-2"></i>
                            <span class="font-medium">软便</span>
                        </div>
                        <div class="text-sm text-gray-500 mt-1">
                            08:15
                            <span class="ml-2 text-yellow-500">
                                <i class="fas fa-exclamation-circle mr-1"></i>需要注意
                            </span>
                        </div>
                        <div class="text-sm text-gray-500 mt-1">
                            <i class="fas fa-tint text-blue-500 mr-1"></i>饮水量：300ml
                        </div>
                    </div>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部标签栏 -->
    <div class="weapp-tabbar">
        <div class="weapp-tabbar-item">
            <i class="fas fa-home weapp-tabbar-icon"></i>
            <span>记录</span>
        </div>
        <div class="weapp-tabbar-item active">
            <i class="fas fa-calendar-alt weapp-tabbar-icon"></i>
            <span>历史</span>
        </div>
        <div class="weapp-tabbar-item">
            <i class="fas fa-chart-bar weapp-tabbar-icon"></i>
            <span>统计</span>
        </div>
        <div class="weapp-tabbar-item">
            <i class="fas fa-user weapp-tabbar-icon"></i>
            <span>我的</span>
        </div>
    </div>
</body>
</html> 